<template>
	<view class="mask">
		<view class="content">
			<view class="loadEffect">
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
			</view>
			<view class="message">
				<text>{{text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			text:{
				type:String,
				default:'请输入'
			}
		},
		methods: {
		},
		beforeMount() {},
	}
</script>

<style lang="less" scoped>
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .6);
		z-index: 9999;
	}

	.content {
		width: 400rpx;
		height: 374rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loadEffect {
		width: 108px;
		height: 108rpx;
		position: relative;
		top: 48rpx;
	}

	.loadEffect view {
		width: 12rpx;
		height: 36rpx;
		background: #FCC928;
		position: absolute;
		-webkit-animation: load .8s ease infinite;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}

	.loadEffect view:nth-child(1) {
		left: calc(50% - 6rpx);
		-webkit-animation-delay: 0.08s;
	}

	.loadEffect view:nth-child(2) {
		top: 6rpx;
		left: calc(50% + 20rpx);
		transform: rotate(36deg);
		-webkit-animation-delay: 0.16s;
	}

	.loadEffect view:nth-child(3) {
		top: 28rpx;
		left: calc(50% + 38rpx);
		transform: rotate(72deg);
		-webkit-animation-delay: 0.24s;
	}

	.loadEffect view:nth-child(4) {
		top: 54rpx;
		left: calc(50% + 36rpx);
		transform: rotate(108deg);
		-webkit-animation-delay: 0.32s;
	}

	.loadEffect view:nth-child(5) {
		top: 70rpx;
		left: calc(50% + 20rpx);
		transform: rotate(144deg);
		-webkit-animation-delay: 0.40s;
	}

	.loadEffect view:nth-child(6) {
		top: 76rpx;
		left: calc(50% - 6rpx);
		transform: rotate(180deg);
		-webkit-animation-delay: 0.48s;
	}

	.loadEffect view:nth-child(7) {
		top: 70rpx;
		left: calc(50% - 32rpx);
		transform: rotate(216deg);
		-webkit-animation-delay: 0.56s;
	}

	.loadEffect view:nth-child(8) {
		top: 54rpx;
		left: calc(50% - 48rpx);
		transform: rotate(252deg);
		-webkit-animation-delay: 0.64s;
	}

	.loadEffect view:nth-child(9) {
		top: 28rpx;
		left: calc(50% - 50rpx);
		transform: rotate(288deg);
		-webkit-animation-delay: 0.72s;
	}

	.loadEffect view:nth-child(10) {
		top: 6rpx;
		left: calc(50% - 32rpx);
		transform: rotate(324deg);
		-webkit-animation-delay: 0.8s;
	}

	.message {
		margin-top: 76rpx;
		text-align: center;

		&>text {
			font-size: 32rpx;
			font-weight: 500;
			color: #787878;
			line-height: 54rpx;
		}
	}
</style>
